<template>
  <div id="monitorMap">
    <div class="dataAllBorder01 ">
      <div class="dataAllBorder02" style="position: relative; overflow: hidden;">
        <!--标题栏-->
        <div class="map_title_box" style="height: 6%">
          <div class="map_title_innerbox">
            <div class="map_title">无锡实时监测地图</div>
          </div>
        </div>
        <!--//仓库-1，加油站-2，派出所-3，危化品企业-4，学校-5，医疗卫生-6，应急避难场所-7-->
        <baidu-map class="map" @ready="onReady" :center="{ lng: 120.271267, lat: 31.483683 }" :zoom="15" :scroll-wheel-zoom="true">
          <!-- 在地图右下角加入缩略图控件 -->
          <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
          <!-- 获取城市列表 -->
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          <bm-marker :position="{ lng: 120.27, lat: 31.483 }" :dragging="true"> </bm-marker>
          <bm-marker :position="{ lng: 120.265617, lat: 31.471182 }" :dragging="true"> </bm-marker>
          <!-- 海量点需要zoom小于10 -->
          <bm-point-collection
              :points="points"
              shape="BMAP_POINT_SHAPE_STAR"
              color="red"
              size="BMAP_POINT_SIZE_BIG"
              @click="clickHandler"
          ></bm-point-collection>
        </baidu-map>
        <!--地图显示信息选择-->
<!--        <div class="map" id="divMap"  ></div>-->
        <div class="display_type_box display_box" style="display: none;overflow:auto">
          <div class="display_type_center_box">
            <ul class="display_type_inner_box" id="layerList">
              <li class="display_type_msg"><input id="zt_4" type="checkbox" class="display_type_chose"/>水质监测</li>
              <li class="display_type_msg"><input id="zt_1" type="checkbox" class="display_type_chose"/>流量监测</li>
              <li class="display_type_msg"><input id="zt_5" type="checkbox" class="display_type_chose"/>水位监测</li>
            </ul>
          </div>
          <div class="display_type_funct_box">
            <span class="display_type_funct display_type_funct_sure">确定</span>
          </div>
        </div>
        <!--地图工具栏-->
        <div class="map_tool_outbox">
          <span class="map_tool" onClick="zoomFull()"><a class="map_tool_inner" title="全图"></a></span>
          <span class="map_tool" onClick="zoomOut()"><a class="map_tool_inner" title="放大" style="background-position-x:-36px"></a></span>
          <span class="map_tool" onClick="zoomIn()"><a class="map_tool_inner" title="缩小" style="background-position-x:-72px"></a></span>
          <span class="map_tool" onClick="showHeatMap()"><a class="map_tool_inner" title="倒退视图" style="background-position-x:-108px"></a></span>
          <span class="map_tool"><a class="map_tool_inner" title="前进视图" style="background-position-x:-144px"></a></span>
          <span class="map_tool"><a class="map_tool_inner display_type_btn" title="专题地图" style="background-position-x:-180px"></a></span>
          <span class="map_tool"><a class="map_tool_inner city_chose_btn" title="城市定位" style="background-position-x:-432px"></a></span>
          <span class="map_tool" id="btnBuffer"><a class="map_tool_inner" title="缓冲区分析" style="background-position-x:-216px"></a></span>
          <span class="map_tool"><a class="map_tool_inner addition_check_btn check_btn" title="水质监测设备检索" style="background-position-x:-252px"></a></span>
          <span class="map_tool"><a class="map_tool_inner chemistry_check_btn check_btn" onClick="chemistryCheck()" title="流量监测设备检索" style="background-position-x:-288px"></a></span>
          <span class="map_tool"><a class="map_tool_inner enterprise_check_btn check_btn" onClick="enterpriseCheck()" title="水位监测设备检索" style="background-position-x:-324px"></a></span>
          <span class="map_tool"><a class="map_tool_inner car_check_btn check_btn" onClick="carCheck()" title="车辆监测设备检索" style="background-position-x:-360px"></a></span>
          <span class="map_tool"><a class="map_tool_inner" onClick="Search()" title="视频设备检索" style="background-position-x:-468px"></a></span>
          <span class="map_tool"><a class="map_tool_inner" onClick="cancel()" id="fresh_tool" title="清空" style="background-position-x:-396px"></a></span>
          <span class="map_tool"><input type="text" id="txtCoord" style="width:150px;visibility:hidden"/></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      points: [1, 2, 3],
    };
  },
  components: {},
  mounted() {
  },
  methods: {
    onCircle() {
      console.log(888);
    },
    updateCirclePath(e) {
      console.log(e, 88);
    },
    clickHandler(e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
    },
    onReady() {
      const points = [];
      for (var i = 0; i < 1000; i++) {
        const position = {
          lng: Math.random() * 40 + 85,
          lat: Math.random() * 30 + 21,
        };
        points.push(position);
      }
      this.points = points;
    },
  }
};
</script>

<style lang="scss">
@import "../assets/scss/Security_operation.css";

#monitorMap {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
}
</style>